---
image: /generated/articles-docs-media-video.png
title: '<Video>'
crumb: 'API - @remotion/media'
---

:::note
This is documentation for the new `<Video>` tag.  
Not to be confused with the older [`<Html5Video>` / `<Video>`](/docs/html5-video) tag from `remotion`.
:::

This component imports and displays a video, similar to [`<OffthreadVideo/>`](/docs/offthreadvideo) but during rendering, extracts the exact frame from the video using [Mediabunny](/docs/mediabunny) and displays it in a `<canvas>` tag.

This component has [native buffering support](/docs/player/buffer-state) enabled by default. When used in the Player, it automatically pauses playback when buffering and resumes when ready.

## Example

```tsx twoslash
import {AbsoluteFill, staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};
```

You can load a video from an URL as well:

```tsx twoslash
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
// ---cut---
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};
```

## Props

### `src`

The URL of the video to be rendered. Can be a remote URL or a local file referenced with [`staticFile()`](/docs/staticfile).

### `trimBefore?`

Will remove a portion of the video at the beginning (left side).

In the following example, we assume that the [`fps`](/docs/composition#fps) of the composition is `30`.

By passing `trimBefore={60}`, the playback starts immediately, but with the first 2 seconds of the video trimmed away.  
By passing `trimAfter={120}`, any video after the 4 second mark in the file will be trimmed away.

The video will play the range from `00:02:00` to `00:04:00`, meaning the video will play for 2 seconds.

For exact behavior, see: [Order of operations](/docs/audio/order-of-operations).

```tsx twoslash
import {AbsoluteFill, staticFile} from 'remotion';
import {Video} from '@remotion/media';

// ---cut---
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile('video.webm')} trimBefore={60} trimAfter={120} />
    </AbsoluteFill>
  );
};
```

### `trimAfter?`

Removes a portion of the video at the end (right side). See [`trimBefore`](#trimbefore) for an explanation.

### `volume?`

Allows you to control the volume of the audio in it's entirety or frame by frame.  
Read the page on [using audio](/docs/using-audio) to learn more.

```tsx twoslash title="Setting a static volume"
import {AbsoluteFill, staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Video volume={0.5} src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};
```

```tsx twoslash title="Changing the volume over time"
import {AbsoluteFill, interpolate, staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Video volume={(f) => interpolate(f, [0, 30], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} src={'https://remotion.media/video.mp4'} />
    </AbsoluteFill>
  );
};
```

### `name?`

A name and that will be shown as the label of the sequence in the timeline of the Remotion Studio. This property is purely for helping you keep track of items in the timeline.

### `onError?`

**Currently not supported!**

### `playbackRate?`<AvailableFrom v="4.0.354" />

Controls the speed of the video. `1` is the default and means regular speed, `0.5` slows down the video so it's twice as long and `2` speeds up the video so it's twice as fast.

```tsx twoslash title="Example of a video playing twice as fast"
import {AbsoluteFill, staticFile} from 'remotion';
import {Video} from '@remotion/media';

// ---cut---
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video playbackRate={2} src={'https://remotion.media/video.mp4'} />
    </AbsoluteFill>
  );
};
```

:::note
Playing a video in reverse is not supported.
:::

### `muted?`

You can drop the audio of the video by adding a `muted` prop:

```tsx twoslash title="Example of a muted video"
import {AbsoluteFill, OffthreadVideo} from 'remotion';
import {Video} from '@remotion/media';
// ---cut---
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video muted src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};
```

### `style?`

You can pass any style you can pass to a native HTML `<canvas>` element.

```tsx twoslash
import {AbsoluteFill, staticFile} from 'remotion';
import {Video} from '@remotion/media';

// ---cut---
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile('video.webm')} style={{height: 720, width: 1280}} />
    </AbsoluteFill>
  );
};
```

### `loop?`

Makes the video loop indefinitely.

```tsx twoslash title="Example of a looped video"
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';

// ---cut---
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video loop src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};
```

:::note
When a video ends (and `loop` is not set), the last frame of the video remains visible by default.  
This matches the behavior of [`<Html5Video>`](/docs/html5-video#loop).
:::

### `loopVolumeCurveBehavior?`<AvailableFrom v="4.0.354" />

Controls the `frame` which is returned when using the [`volume`](#volume) callback function and adding the [`loop`](#loop) attribute.

Can be either `"repeat"` (default, start from 0 on each iteration) or `"extend"` (keep increasing frames).

### `showInTimeline?`

If set to `false`, no layer will be shown in the timeline of the Remotion Studio. The default is `true`.

### `delayRenderTimeoutInMilliseconds?`

Customize the [timeout](/docs/delay-render#modifying-the-timeout) of the [`delayRender()`](/docs/delay-render) call that this component makes.

### `delayRenderRetries?`

Customize the [number of retries](/docs/delay-render#retrying) of the [`delayRender()`](/docs/delay-render) call that this component makes.

### `onVideoFrame?`

A callback function that gets called when a frame is extracted from the video.  
Useful for [video manipulation](/docs/video-manipulation).  
The callback is called with a [`CanvasImageSource`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource) object, more specifically, either an `ImageBitmap` or a `VideoFrame`.

### `audioStreamIndex?`

Select the audio stream to use. The default is `0`.

```tsx twoslash
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';

// ---cut---
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video audioStreamIndex={1} src={'https://remotion.media/multiple-audio-streams.mov'} />
    </AbsoluteFill>
  );
};
```

### `toneFrequency?`

Accepts a number between `0.01` and `2`, where `1` represents the original pitch. Values less than `1` will decrease the pitch, while values greater than `1` will increase it.

A `toneFrequency` of 0.5 would lower the pitch by half, and a `toneFrequency` of `1.5` would increase the pitch by 50%.

The value must stay the same across the entire time the video tag is mounted.

:::warning
Only works during rendering.  
:::

### `fallbackOffthreadVideoProps?`

When a [fallback to `<OffthreadVideo>`](/docs/media/fallback) happens, this prop allows you to pass props to the fallback `<OffthreadVideo>` component.  
Only props that are not supported by `<Video>` from `@remotion/media` need to be specified here - props that apply for both tags will automatically be forwarded and do not need to be specified here.

#### `acceptableTimeShiftInSeconds?`

Maps to [`<OffthreadVideo />` -> `acceptableTimeShiftInSeconds`](/docs/offthreadvideo#acceptabletimeshiftinseconds)

#### `transparent?`

Maps to [`<OffthreadVideo />` -> `transparent`](/docs/offthreadvideo#transparent)

#### `toneMapped?`

Maps to [`<OffthreadVideo />` -> `toneMapped`](/docs/offthreadvideo#tonemapped)

#### `onError?`

Maps to [`<OffthreadVideo />` -> `onError`](/docs/offthreadvideo#onerror)

#### `crossOrigin?`

Maps to [`<OffthreadVideo />` -> `crossOrigin`](/docs/offthreadvideo#crossorigin)

### `disallowFallbackToOffthreadVideo?`<AvailableFrom v="3.0.356" />

By default, if the video cannot be embedded using this tag, [a fallback to `<OffthreadVideo>`](/docs/media/fallback) will be attempted.

Pass this prop to disable the fallback and fail the render instead.

### `debugOverlay?`

Shows a debug overlay on the video. This is useful for debugging the video playback.

## See also

- [Source code for this component](https://github.com/remotion-dev/remotion/blob/main/packages/media/src/video/video.tsx)
- [Comparison of video tags](/docs/video-tags)
- [`<Audio>` (from `@remotion/media`)](/docs/media/audio)
- [`<Html5Video>` (from `remotion`)](/docs/html5-video)
- [`<OffthreadVideo>`](/docs/offthreadvideo)
